<script type="text/javascript">
$(function(){
/*--------------
     Upload Cover
---------------*/
	/*trigger real button*/
	$('.cover-btn').click(function(e){
		e.preventDefault();
		$('#upload-cover').trigger('click');
	});
	/*preview upload picture*/
	$('#upload-cover').change(function(){
		var fileReader = new FileReader();
		fileReader.readAsDataURL(document.getElementById("upload-cover").files[0]);

		fileReader.onload = function (e) {
			$('.hide-when-change').transition('fade up');
			$('.cover-picture').addClass('drag-cursor').css("background","url("+e.target.result+") no-repeat").animate({height:'28.5714rem'},200,function(){
				$('.show-when-change').transition('fade up');
				if($("#searchfood").length){
					$.sf.sTop = $("#searchfood").offset().top-14;
				}
			});
			$('.cover-picture').backgroundDraggable({ axis: 'y' });
		};
	});
	$('.cover-cancel').click(function(){
		var showwhenchange = $('.show-when-change');
		showwhenchange.transition('fade up');
		if(showwhenchange.hasClass('no-picture')){
			$('.cover-picture').removeClass('drag-cursor').css("background","#00b5ad").animate({height:'15.5rem'},200,function(){
				$('.hide-when-change').transition('fade up');
				if($("#searchfood").length){
					$.sf.sTop = $("#searchfood").offset().top-14;
				}				
			});	
		}
		
	});
/*--------------
     Dimmer
---------------*/	
	$('.dimmer').dimmer({on: 'hover'});/*Initialize Dimmer*/
});
</script>
<style type="text/css">
/*--------------
     Top Menu (Add new "top-menu" ID)
---------------*/
#top-menu{
	margin-bottom: 0;
}

/*--------------
     Menu (Add new "square" class)
---------------*/
.ui.square.menu > .item{
	border-radius: 0;
}


/*--------------
     Cover photo
---------------*/
.user-profile{
	background-color:#fff;
	font-size:14px;
	box-shadow: 0 0 0 1px rgba(39, 41, 43, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	margin-bottom: 2em;
}
.user-profile > .wrap{
	position: relative;
}
.cover-picture{
	min-height:17.8571rem;
	position: relative;
	background-color:#00b5ad;
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;
}
.cover-profile{
	position:absolute;
	bottom:1.7857em;
	left:1.7857em;
	box-shadow: 0 0 0 1px rgba(39, 41, 43, 0.15), 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}
.cover-profile .ui.image{
	width:200px;
	height:200px;
}
.cover-name{
	position: absolute;
	bottom: 1.7857em;
	left:17.8571em;
}
.cover-name > *{
	font-size: 2.2em;
	color:#fff;
	text-shadow: 0 0 3px #000;
}
.cover-info{
	min-height:5em;
}
.cover-info > div{
	margin-left:16.0714em;
}
.cover-info .wrap{
	padding:0.7em 0;
	display:table;
}
.user-info{
	padding:0 1.7857em;
	display:table-cell;
	color:rgba(0,0,0,0.6);
	font-weight:bold;
}
.user-info > *{
	font-size:1.1em;
}
.user-stat{
	padding:0 1.7857em;
	display:table-cell;
	text-align:center;
}
.user-stat > *:first-child{
	font-size:1.5em;
}
.user-stat > *:first-child + *{
	color:rgba(0,0,0,0.6);
}
.cover-button,.show-when-change {
	position: absolute;
	right:1.7857em;
	bottom:1.7857em;
}
.show-when-change{
	display: none;
	text-align: right;
}
.show-when-change p{
	color:#fff;
	font-size: 1.4em;
	text-shadow: 0px 0px 3px #000;
	margin:0;
}
#upload-cover{
	opacity: 0;
	width:0em;
}
.drag-cursor{
	cursor:move;
}
.cover-menu{
	border-top:1px solid rgba(0,0,0,0.05);
}
.ui.menu.cover-menu > .item{
	padding: 0.7em 1em;
}
</style>


<div class="user-profile">
	<div class="wrap">
		<!-- Cover picture -->
		<div class="cover-picture">
			<!-- Profile name -->
			<div class="cover-name">
				<div>ศรัณย์</div>
			</div>
			<!-- Cover button -->
			<div class="cover-button hide-when-change">
				<div class="ui large inverted basic button cover-btn"><i class="camera icon"></i> เปลี่ยน Cover</div>
			</div>
			<!-- Cover confirm button -->
			<div class="show-when-change no-picture">
				<p>ลากเมาส์ขึ้นลงเพื่อปรับตำแหน่ง</p>
				<div class="cover-action">
					<div class="ui large primary cover-confirm button">ตกลง</div><div class="ui large cover-cancel button">ยกเลิก</div>
				</div>						
			</div>
			<input id="upload-cover" type="file" name="photo-upload"/>
		</div>
		<!-- Profile information -->
		<div class="cover-info">
			<div>
				<div class="wrap">
					<div class="user-info">
						<div>ชาย ,27 ปี</div>
						<div>Fitness First แจ้งวัฒนะ</div>							
					</div>
					<div class="user-stat">
						<div>66</div>
						<div>กิโลกรัม</div>
					</div>
					<div class="user-stat">
						<div>174</div>
						<div>เซ็นติเมตร</div>
					</div>					
				</div>
			</div>
		</div>
		<!-- Profile picture -->
		<div class="cover-profile">
			<div class="dimmable">
				<div class="ui dimmer">
					<div class="content">
						<div class="center">
							<a href="image2.php" class="ui primary inverted button"><i class="camera icon"></i> ดูรูป</a>
							<div class="ui inverted button"><i class="camera icon"></i> เปลี่ยนรูป</div>
						</div>
					</div>
				</div>
				<img class="ui image" src="images/t.jpg">
			</div>
		</div>			
	</div>
	<div>
		<div class="ui square secondary menu cover-menu">
<?php
$pages = array();
$pages["profile.php"] = "หน้าแรก";
$pages["weight.php"] = "น้ำหนัก";
$pages["measurement.php"] = "สัดส่วน";
$pages["image.php"] = "รูปภาพ";
$pages["goal.php"] = "เป้าหมาย";
$pages["meal.php"] = "อาหาร";
?>
<?php foreach($pages as $url=>$title):?>
       <a class="item<?php if($url === $active_page):?> active<?php endif;?>" href="<?php echo $url;?>">
         <?php echo $title;?>
      </a>
<?php endforeach;?>		
		</div>
	</div>	
</div>